<template>
  <!-- 排版 -->
  <div class="scheduling-main">
    
    <div class="scheduling">
      <div class="isPutAway" @click="isPutAwayBtn">
          <el-icon><Back /></el-icon>
        </div>
      <!-- 排版-头部 -->
      <div class="scheduling-head">
        
        <div class="operation">
          <div class="left-arrow" title="上一周" @click="prevWeek">
            <el-icon><ArrowLeftBold /></el-icon>
          </div>
          <div class="right-arrow" title="下一周" @click="nextWeek">
            <el-icon><ArrowRightBold /></el-icon>
          </div>
          
        </div>
        <div class="weeks">
          <div class="week-day" v-for="i in weekday" :key="i.week">{{i.week}}({{i.day}})</div>
        </div>
        
      </div>
      <div class="sceduling-content">
        <!-- 左边时区 -->
        <div class="left-time-zone">
          <div class="time-zone-item" v-for="i in timeZone" :key="i.hour">
            <div class="hour-item">{{i.hour}}</div>
            <div class="minute" >
              <div class="part" v-for="(m, index) in i.minute" :key="m.part + index">{{m.part}}</div>
            </div>
          </div>
        </div>
        <!-- 右边列表 -->
          <div class="week " v-for="i in renderData" :key="i" :class="dayType === 'week' ? 'week-type' : ''">
            <!-- 每列有多少行 -->
            
              
                  <div class="line-item" v-for="d in i" :key="d">
                    <el-popover
                        placement="left"
                        :width="180"
                        trigger="click"
                        v-for="tem in d.data" :key="tem" 
                      >
                      <personPanel :personObj="tem" @reloadList="reloadList" @handleOpenEditAnApp="handleOpenEditAnApp"></personPanel>
                    <template #reference>
                      <div class="Exhibition" 
                          :class="{'exhWidth': d.data.length === 1, 'exhMAXWidth': d.data.length > 5}"
                          :style="{height: 30 * temHeight(tem.startTime, tem.endTime) + 'px'}"
                          @click="handleClick(tem)"
                          >
                        <div class="exhibition-head" :class="setStatusColor(tem.status, tem.haveHistory)">
                          <span style="font-weight: bold; font-size: 16px">{{tem.customerName || '未知'}} </span>
                          <span class="exhibition-icons">
                            <div class="tag blue" v-if="tem.customerSex === '男'">
                              <el-icon ><male /></el-icon>
                            </div>
                            <div class="tag red" v-if="tem.customerSex === '女'">
                              <el-icon ><female /></el-icon>
                            </div>
                          </span>
                          <span v-if="tem.age <= 17 || tem.age >= 60" class="tag-age" :class="setAgeColor(tem.age)">{{setAge(tem.age)}}</span>
                          <!-- <span v-if="tem.doctorName">{{'【' + tem.doctorName + '】'}}</span> -->
                        </div>
                        <div class="exhibition-bg-blue">
                          <div class="exhibition-time">{{tem.startTime}} - {{tem.endTime}}</div>
                          <div class="exhibition-time">{{tem.itemNames}}</div>
                          <div class="exhibition-time">{{tem.remark}}</div>
                        </div>
                        
                      </div>
                    </template>
                </el-popover>
                  </div>
          </div>
      </div>

      <div class="sceduling-remark" v-show="isMantle"></div>
    </div>
    
  </div>

</template>


<script lang="ts">
import { ArrowLeftBold, ArrowRightBold, Back, Male, Female, } from '@element-plus/icons-vue'
import { computed, defineComponent, ref, PropType, watch } from '@vue/runtime-core'
import {getAllDays} from '../../utils/Date'
import personPanel from '../styleBorder/personPanel.vue'

interface WeekDay {
  week: string,
  day: string
}

export default defineComponent({
  name: 'Scheduling',
  components: {
    personPanel,

    ArrowLeftBold,
    ArrowRightBold,
    Back,
    Male,
    Female
  },
  props: {
    weekDayList: {
      type: Array as PropType<WeekDay[]>
    },
    weekDataList: {
      type: Array as PropType<Array<Array<any | number>>>
    },
    type: {
      type: String
    },
    firstDate: {
      type: String,
      default: '',
    },
    lastDate: {
      type: String,
      default: '',
    },
    isMantle: {
      type: Boolean,
      default: false
    }
  },
  emits: ['reloadList', 'nextWeek', 'prevWeek', 'handleOpenEditAnApp', 'isPutAwayBtn'],
  setup(props, ctx) {
    const weekday = ref(props.weekDayList)
    const timeZone = [
      {
        hour: '08',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '09',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '10',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '11',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '12',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '13',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '14',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '15',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '16',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '17',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      },
      {
        hour: '18',
        minute: [
          {
            part: '00'
          },
          {
            part: '15'
          },
          {
            part: '30'
          },
          {
            part: '45'
          }
        ]
      }
    ]
    let allDay = ref([] as any)
    const firstDate1 = ref(props.firstDate)
    const lastDate1 = ref(props.lastDate)
    console.log('开始',firstDate1.value)
    console.log('结束' ,lastDate1.value)

    allDay.value = getAllDays(props.firstDate, props.lastDate)
    
    console.log(allDay.value)

    watch(() => [props.firstDate, props.lastDate], ([first, last],[prevfist, prevlast]) => {
      firstDate1.value = first
      lastDate1.value = last

      allDay.value = getAllDays(firstDate1.value, lastDate1.value)
      
    })
    const weekData = ref(props.weekDataList as any[][])
    const dayType = ref(props.type)
    // 侦听结构
    watch(() => (props.weekDayList), (dayList, preDayList) => {
      weekday.value = dayList
    })
    // 侦听数据
    watch(()=> (props.weekDataList as any[][]), (weekList:any[][], prevList) => {
      console.log(weekList, 'weekList')
      weekData.value = weekList
      getRender()
    })

    watch(() => (props.type), (type, prevType) => {
      dayType.value = type
    })

    const reloadList = () => {
      ctx.emit('reloadList')
    }

    const setStatusColor = (status: string, isHave: boolean) => {
      let color = '';
      switch(status) {
        case '取消':
          color = 'cancel-status';
          break;
        case '完成':
          color = 'over-status';
          break;
      }

      if(isHave) {
        color = 'blue-color'
      }

      return color
    }

    const setAge = (age: number) => {
      let tag = '';
      if(age <= 17) {
        tag = '儿'
      }else if (age >= 60) {
        tag = '老'
      }

      return tag;
    }

    const setAgeColor = (age: number) => {
      let color = '';
      if(age <= 17) {
        color = 'tag-blue'
      }else if (age >= 60) {
        color = 'tag-purple'
      }

      return color;
    }


    let rows = [
      {
        key: ['8:00','8:14']
      },
      {
        key: ['8:15','8:29']
      },
      {
        key: ['8:30', '8:44']
      },
      {
        key: ['8:45', '8:59']
      },
      {
        key: ['9:00', '9:14']
      },
      {
        key: ['9:15', '9:29']
      },
      {
        key: ['9:30', '9:44']
      },
      {
        key: ['9:45', '9:59']
      },
      {
        key: ['10:00', '10:14']
      },
      {
        key: ['10:15', '10:29']
      },
      {
        key: ['10:30', '10:44']
      },
      {
        key: ['10:45', '10:59']
      },
      {
        key: ['11:00', '11: 14']
      },
      {
        key: ['11:15', '11: 29']
      },
      {
        key: ['11:30', '11:44']
      },
      {
        key: ['11:45', '11:59']
      },
      {
        key: ['12:00', '12:14']
      },
      {
        key: ['12:15', '12:29']
      },
      {
        key: ['12:30', '12:44']
      },
      {
        key: ['12:45', '12:59']
      },
      {
        key: ['13:00', '13:14']
      },
      {
        key: ['13:15', '13:29']
      },
      {
        key: ['13:30', '13:44']
      },
      {
        key: ['13:45', '13:59']
      },
      {
        key: ['14:00', '14:14']
      },
      {
        key: ['14:15','14:29']
      },
      {
        key: ['14:30', '14:44']
      },
      {
        key: ['14:45', '14:59']
      },
      {
        key: ['15:00', '15:14']
      },
      {
        key: ['15:15','15:29']
      },
      {
        key: ['15:30','15:44']
      },
      {
        key: ['15:45','15:59']
      },
      {
        key: ['16:00','16:14']
      },
      {
        key: ['16:15', '16:29']
      },
      {
        key: ['16:30','16:44']
      },
      {
        key: ['16:45','16:59']
      },
      {
        key: ['17:00', '17:14']
      },
      {
        key: ['17:15', '17:29']
      },
      {
        key: ['17:30','17:44']
      },
      {
        key: ['17:45', '17:59']
      },
      {
        key: ['18:00', '18:14']
      },
      {
        key: ['18:15', '18:29']
      },
      {
        key: ['18:30', '18:44']
      },
      {
        key: ['18:45', '18:59']
      },
    ]

    const temHeight = (startTime: string, endTime: string) => {
      let start = startTime.split(':')
      let end = endTime.split(':')
      // console.log(start)
      // console.log(end)
      let num = 0
      if(start[0] === end[0]) {
        num = (Number(end[1]) - Number(start[1])) / 15
        // console.log(num)
      }

      if(start[0] < end[0]) {
        let count = 0
        count = (Number(end[0]) - Number(start[0]))
        if(start[1] === end[1]) {
          num = (count * 60) / 15
          // console.log(count,'这是小于的')
        }
        num = (count * 60) / 15 + (Number(end[1]) - Number(start[1])) / 15
        // console.log('外面', num)
      }
      return num
    }

    let renderData = ref([] as any)
    // new Array(7).fill('').forEach((item, index) => {
    //   renderData.value.push([])
    //     for(let i = 0; i < rows.length; i++) {
    //       renderData.value[index].push({
    //         key: rows[i].key
    //       })
    //     }
    // })
    // 渲染匹配
    const getRender = () => {
      console.log(props.type, 'getRender')
      renderData.value = []
      if(dayType.value === 'day') {
        new Array(1).fill('').forEach((item, index) => {
          renderData.value.push([])
            for(let i = 0; i < rows.length; i++) {
              renderData.value[index].push({
                key: firstDate1.value + ' ' + rows[i].key[0] + ',' + firstDate1.value + ' ' + rows[i].key[1]
              })
            }
        })
      } 
      if(dayType.value === 'week') {
        new Array(7).fill('').forEach((item, index) => {
          renderData.value.push([])
            for(let i = 0; i < rows.length; i++) {
              renderData.value[index].push({
                key: allDay.value[index] +' '+ rows[i].key[0] + ',' + allDay.value[index] +' '+ rows[i].key[1]
              })
            }
        })
      }
      
      console.log(renderData.value)
      renderData.value.forEach((item: any, index: number) => {
        console.log(item)
      item.forEach((i:any) => {
          // console.log('rows', i.key, i.key[0])
          let rows = String(i.key).split(',')
          let iStart = new Date(rows[0]).getTime()
          let iEnd = new Date(rows[1]).getTime()

          let result = weekData.value[index] && weekData.value[index].filter((w: any) => {
            if(dayType.value === 'week') {
              let startAllDate = allDay.value[index] + ' ' + w.startTime
              let endAllDate = allDay.value[index] + ' ' + w.endTime

              return new Date(startAllDate).getTime() >= iStart && new Date(startAllDate).getTime() <= iEnd
            }
            

            if(dayType.value === 'day') {
              let startAllDate = firstDate1.value + ' ' + w.startTime
              let endAllDate = firstDate1.value + ' ' + w.endTime

              return new Date(startAllDate).getTime() >= iStart && new Date(startAllDate).getTime() <= iEnd
            }

            
          })
          
          if(result && result.length) {
            i.data = result
            result.forEach((h: any) => {
              temHeight(h.startTime, h.endTime)
            })
          }
        })
      })

      
    }
    getRender()

    const visible = ref(false)
    const handleClick = (item: any) => {
      console.log('点击了', item)
      visible.value = true
    }

    const prevWeek = () => {
      console.log('上一周')
      ctx.emit('prevWeek')
    }

    const nextWeek = () => {
      console.log('下一周')
      ctx.emit('nextWeek')
    }

    const handleOpenEditAnApp = (id:number, personId: number) => {
      ctx.emit('handleOpenEditAnApp', id, personId)
    }

    const isPutAwayBtn = () => {
      ctx.emit('isPutAwayBtn')
    }

    
    return {
      weekday,
      dayType,
      timeZone,
      weekData,
      renderData,
      handleClick,
      temHeight,

      firstDate1,
      lastDate1,
      reloadList,
      setStatusColor,
      setAge,
      setAgeColor,

      prevWeek,
      nextWeek,
      handleOpenEditAnApp,
      isPutAwayBtn,

      visible
    }
  }
})
</script>

<style lang="scss" scoped>
.scheduling-main {
    width: 100%;
    // height: 600px;
    height: 100vh;
    box-shadow: 0 0 3px #e9e9e9;
    border-radius: 10px;
    background: white;
    display: flex;
    overflow: hidden;
  .scheduling {
    width: 100%;
    height: 100%;
    font-size: $fontSize-1;
    position: relative;

    .isPutAway {
        position: absolute;
        width: 24px;
        height: 40px;
        background-color: $mainColor;
        border-radius: 10px 0 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        z-index: 9;
      }
    .scheduling-head {
      height: 40px;
      width: 100%;
      // background: red;
      display: flex;
      box-shadow: 0 1px 3px #ccc;
      position: relative;

      

      .operation {
        width: 70px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 32px;
        box-sizing: border-box;

        .left-arrow {
          cursor: pointer;
        }

        .right-arrow {
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .weeks {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: calc(100% - 60px);
        height: 100%;
        color: $primaryText;

        .week-day {
          font-weight: 600;
          font-size: $fontSize-1;
        }
      }
    }

    .sceduling-content {
      height: calc(100% - 40px);
      width: 100%;
      display: flex;
      overflow: auto;
      
      .week {
        flex: 1;


        .line-item {
          height: 30px;
          width: 100%;
          // background: red;
          border-bottom: 1px solid #c0c4cc;
          border-right: 1px solid #c0c4cc;
          box-sizing: border-box;
          display: flex;
          position: relative;
        }
      }
      .week-type {
        max-width: 15%;
      }

      .week-1 {
        background: cyan;
      }
      .week-2 {
        background: tomato;
      }
      .week-3 {
        background: pink;
      }
      .week-4 {
        background: green;
      }
      .week-5 {
        background: purple;
      }
      .week-6 {
        background: orange;
      }
      .week-7 {
        background: #80c;
      }
    }

    .sceduling-remark {
      width: 100%;
      height: calc(100% - 40px);
      background-color: rgba(0,0,0, .15);
      position: absolute;
      top: 40px;
      left: 0;
      z-index: 999;
      cursor: not-allowed;

    }
  }

  .left-time-zone {
    width: 60px;
    // height: calc(100% - 40px);

    .time-zone-item {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
      border: 1px solid #ccc;
      box-sizing: border-box;
      border-bottom: 0;
      font-size: $fontSize;

      .hour-item {
        flex: 1;
        height: 100%;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }

      .minute {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        .part {
          flex: 1;
          width: 100%;
          border-bottom: 1px solid #ccc;
          box-sizing: border-box;
        }
        .part:last-child {
          border-bottom: none;
        }
      }
      
    }

    .time-zone-item:last-child {
      border-bottom: 1px solid #ccc;
    }
  }
}


.Exhibition {
  background-color: #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-sizing: border-box;
  z-index: 9;
  overflow: hidden;
  cursor: pointer;
  margin: 6px;
  box-shadow: 0 2px 12px #bbbaba, 0 0px 12px #e9e9e9;
  color: $primaryText;
  user-select: none;
  
  .exhibition-head {
    display: flex;
    padding: 3px;
    background: rgb(253, 226, 226);

    .exhibition-icons {
      display: flex;
      .red{
        color: red;
      }
      .blue{
        color: rgb(64, 158, 255);
      }
    }

    .tag-age {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      margin-left: 6px;
    }

    .tag-blue {
      background-color: #409EFF;
    }
    .tag-purple {
      background-color: #E84708
    }
  }

  .cancel-status {
    background: #CDD0D6;
  }

  .over-status {
    background: #b3e19d;
  }

  .blue-color {
    background: #a0cfff;
  }

  .exhibition-bg-blue {
    // background: rgb(64, 158, 255);
    opacity: .8;
    .exhibition-time {
      padding: 0 3px;
    }
  }
  .exhibition-time {
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space:nowrap;
    // width: 60px;
  }
}
.exhWidth {
  width: 100%;
}
.exhMAXWidth {
  width: 15px;
}
</style>